<template>
  <div id="pie" />
</template>

<script>
import * as echarts from 'echarts/core'
import { ToolboxComponent, LegendComponent } from 'echarts/components'
import { PieChart } from 'echarts/charts'
import { LabelLayout } from 'echarts/features'
import { CanvasRenderer } from 'echarts/renderers'

echarts.use([
  ToolboxComponent,
  LegendComponent,
  PieChart,
  CanvasRenderer,
  LabelLayout
])
export default {
  data() {
    return {

    }
  },
  created() {

  },
  mounted() {
    var chartDom = document.getElementById('pie')
    var myChart = echarts.init(chartDom)
    var option

    option = {
      legend: {
        right: 'right',
        // top: 'right',
        // left: 'left',
        orient: 'right'

      },
      // toolbox: {
      //   show: true,
      //   feature: {
      //     mark: { show: true },
      //     dataView: { show: true, readOnly: false },
      //     restore: { show: true },
      //     saveAsImage: { show: true }
      //   }
      // },
      series: [
        {
          name: 'Nightingale Chart',
          type: 'pie',
          radius: [10, 100],
          center: ['50%', '50%'],
          roseType: 'area',
          itemStyle: {
            borderRadius: 8
          },
          data: [
            { value: 40, name: '青铜' },
            { value: 38, name: '白银' },
            { value: 32, name: '黄金' },
            { value: 30, name: '钻石' },
            { value: 28, name: '王者' }
          ]
        }
      ]
    }

    option && myChart.setOption(option)
  },
  methods: {

  }
}
</script>

<style scoped lang="scss">
#pie{
  width: 500px;
  height: 370px;
}

</style>
